<template>
  <el-row class="container1">
    <el-col
      :span="24"
      class="header"
    >
      <el-col
        :span="10"
        class="logo"
        :class="collapsed?'logo-collapse-width':'logo-width'"
      >
        <h3 @click="handleSubmit2">萍乡公安交警<span style="font-size: 14px;">三四五工作</span></h3>
      </el-col>
      <el-col :span="10">
        <div
          class="tools"
          @click.prevent="collapse"
        >
        </div>
      </el-col>
      <el-col
        :span="4"
        class="userinfo"
      >
        <!-- <el-dropdown trigger="hover"> -->
        <span class="el-dropdown-link userinfo-inner"><img
            :src="this.sysUserAvatar"
            @click="logout"
          /> {{user.cUsername}}</span>
        <!-- <el-dropdown-menu slot="dropdown"> -->
        <!-- <el-dropdown-item>我的消息</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item> -->
        <!-- <el-dropdown-item divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-col>
    </el-col>
  </el-row>
</template>
<script>
import { api } from "@/fetch/api";

export default {
  data() {
    return {
      sysName: "萍乡公安交警三四五工作",
      collapsed: false,
      sysUserName: "",
      sysUserAvatar: require("../assets/images/dc_slices/dc@3x.png"),
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      user: {
        cUsername: ""
      },
      menuList: []
    };
  },
  created() { },
  methods: {
    handleSubmit2: function () {
      this.$router.push({ path: "/main" });
    },
    query() {
      let data = api.getCookie("userId");
      // api.UserDetails({ cUserId: data }).then(response => {
      //   if (response.status === 100) {
      //     this.user = response.result;
      //   } else {
      //   }
      // });
    },
    onSubmit() {
      console.log("submit!");
    },
    //退出登录
    logout: function () {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {})
        .then(() => {
          api.deleteCookie("username");
          localStorage.removeItem("token");
          _this.$router.push("/");
        })
        .catch(() => { });
    }
  },
  mounted() {
    this.query();
  }
};
</script>
<style scoped lang="less">
.container1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 70px;
  .header {
    height: 70px;
    line-height: 70px;
    background: #2d3237;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 35px;
      float: right;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          height: 20px;
          margin: 25px 0px 10px 50px;
          float: right;
        }
      }
    }
    .logo {
      height: 70px;
      font-size: 14px;
      padding-left: 20px;
      padding-right: 20px;
      img {
        width: 50px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    h3 {
      font-size: 22px;
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 70px;
      line-height: 70px;
      cursor: pointer;
    }
  }
  .main {
    display: flex; // background: #324057;
    position: absolute;
    top: 70px;
    bottom: 0px;
    overflow: hidden;
    aside {
      flex: 0 0 200px;
      width: 200px;
      .el-menu::-webkit-scrollbar {
        display: none;
      }
      .el-menu {
        height: 100%;
        background: #222d32;
        overflow-y: scroll;
        .el-menu-item {
          color: #747475;
          height: 70px;
          line-height: 70px;
          min-width: 60px;
        }
        .el-menu-item:hover,
        .el-menu-item:focus,
        .el-menu-item.is-active {
          color: #fff;
          background: #222d32;
          height: 50px !important;
          line-height: 50px !important;
        }
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 50px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 50px;
    }
    .menu-expanded {
      flex: 0 0 200px;
      width: 200px;
    }
    .content-container {
      flex: 1;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>